import React, {useState} from 'react';
import {Badge, Card, Paper, Typography} from "@material-ui/core";
import {useHistory} from 'react-router-dom';
import {makeStyles} from "@material-ui/styles";
import Grid from "@material-ui/core/Grid";
import Box from "@material-ui/core/Box";
import CardMedia from "@material-ui/core/CardMedia";
import {createNewIndicatorRequest} from "../../../../redux/reducers/gqiEditor";
import {useDispatch} from "react-redux";

const useStyles = makeStyles((theme) => ({
  gridContainer: {
    margin: theme.spacing(14, 0, 3, 0)
  },
  gridContainerSubtitle: {
    margin: theme.spacing(1, 0, 5, 0)
  },
  box: {
    padding: theme.spacing(4)
  },
  typographyHeader: {
    margin: theme.spacing(0, 0, 4, 0)
  },
  paperCard: {
    display: "block",
    transition: "all .35s linear",
    boxShadow: " 0px 8px 9px 0px rgba(0,0,0,0.4)",
    "&:hover": {
      boxShadow: "-1px 10px 29px 0px rgba(0,0,0,0.8)"
    }
  },
  cardMedia: {
    margin: theme.spacing(-3, 'auto', 0, 'auto')
  },
  media: {
    margin: theme.spacing(0, 'auto', 0, 'auto'),
    width: 75,
    height: 75
  },
  gridCard: {
    margin: theme.spacing(3, 'auto', 0, 'auto')

  },
  gridCardContent: {
    margin: theme.spacing(3),
  }
}));

export default function IndicatorEditor() {
  const classes = useStyles();
  let history = useHistory();
  const dispatch = useDispatch();

  const handleConfirmIndicatorChoice = (indicatorType) => {
    if (indicatorType === "Basic Indicator") {
      dispatch(createNewIndicatorRequest(indicatorType));
      history.push("/basic");
    } else if (indicatorType === "Composite Indicator") {
      history.push("/composite");
    } else if (indicatorType === "Multi-level Indicator") {
      history.push("/multi-level");
    }
  }

  return (
    <>
      <Grid container className={classes.gridContainer}>
        <Grid item xs={false} md={1}/>
        <Grid item xs={12} md={10}>
          <Grid container>
            <Grid item xs={false} sm={1} lg={2}/>
            <Grid item xs={12} sm={10} lg={8}>
              <Grid container>
                <Box className={classes.box}>
                  <Grid container direction="column">
                    <Grid item>
                      <Typography variant={'h3'} className={classes.typographyHeader}>
                        Indicator Editor
                      </Typography>
                    </Grid>
                    <Grid item className={classes.gridContainerSubtitle}>
                      <Typography variant={'body1'}>
                        Select one of the following types of indicator to create a new indicator
                      </Typography>
                    </Grid>
                  </Grid>

                  <Grid
                    container
                    spacing={4}
                    justify="center"
                    style={{marginTop: 8}}
                  >
                    <Grid item xs={12} md={6} style={{marginBottom: 16}}>
                      <Paper
                        style={{height: "100%", cursor: "pointer"}}
                        elevation={10}
                        className={classes.paperCard}
                        onClick={() => handleConfirmIndicatorChoice("Basic Indicator")}
                      >
                        <Grid container direction="column">
                          <Card className={classes.cardMedia} elevation={10}>
                            <CardMedia
                              image="/images/indicators/basicIndicator.svg"
                              className={classes.media}
                            />
                          </Card>
                          <Grid item className={classes.gridCard}>
                            <Typography variant="h5"> Basic indicator </Typography>
                          </Grid>
                          <Grid item className={classes.gridCardContent}>
                            <Typography  gutterBottom>
                              A simple and easy indicator type that is precisely
                              mapped to the Goal-Question-Indicator approach.
                            </Typography>
                            <Typography >
                              It follows a four-step process to generate a new
                              indicator:
                            </Typography>
                            <Typography  style={{marginTop: 6}}>
                              <li>Define a dataset</li>
                              <li>Apply various filters</li>
                              <li>Select an analytics method</li>
                              <li>
                                Specify visualization techniques to render the
                                indicator
                              </li>
                            </Typography>
                          </Grid>
                        </Grid>
                      </Paper>
                    </Grid>
                    {/* Composite Indicator */}
                    <Grid item xs={12} md={6} style={{marginBottom: 16}}>
                      <Paper
                        style={{height: "100%", cursor: "pointer"}}
                        elevation={10}
                        className={classes.paperCard}
                        onClick={() => handleConfirmIndicatorChoice("Composite Indicator")}
                      >
                        <Grid container direction="column">
                          <Card className={classes.cardMedia} elevation={10}>
                            <CardMedia
                              image="/images/indicators/compositeIndicator.svg"
                              className={classes.media}
                            />
                          </Card>
                          <Grid item className={classes.gridCard}>
                            <Badge color="secondary" overlap="rectangle" badgeContent={"Under development"}
                                   anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}>
                              <Typography variant="h5">
                                Composite indicator
                              </Typography>
                            </Badge>
                          </Grid>
                          <Grid item className={classes.gridCardContent}>
                            <Typography  gutterBottom>
                              A combination of multiple Basic Indicators. The
                              combined indicators must have similar analytics
                              methods.
                            </Typography>
                            <Typography >
                              The analysis results of each Basic Indicators are
                              cumulatively analyzed and visualized.
                            </Typography>
                          </Grid>
                        </Grid>
                      </Paper>
                    </Grid>
                    {/* Multi-level Indicator */}
                    <Grid item xs={12} md={6} style={{marginBottom: 16}}>
                      <Paper
                        style={{height: "100%", cursor: "pointer"}}
                        elevation={10}
                        className={classes.paperCard}
                        onClick={() => handleConfirmIndicatorChoice("Multi-level Indicator")}
                      >
                        <Grid container direction="column">
                          <Card className={classes.cardMedia} elevation={10}>
                            <CardMedia
                              image="/images/indicators/multiIndicator.svg"
                              className={classes.media}
                            />
                          </Card>
                          <Grid item className={classes.gridCard}>
                            <Badge color="secondary" overlap="rectangle" badgeContent={"Under development"}
                                   anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}>
                              <Typography variant="h5">
                                Multi-level indicator
                              </Typography>
                            </Badge>
                          </Grid>
                          <Grid item className={classes.gridCardContent}>
                            <Typography  gutterBottom>
                              A complex indicator editor that can combine multiple Basic Indicators.
                            </Typography>
                            <Typography >
                              It follows two analysis steps:
                            </Typography>
                            <Typography  style={{marginTop: 6}}>
                              <li>Select multiple Basic Indicators of same or different analysis methods</li>
                              <li>The analysis of indicators are merged and further analyzed and visualized</li>
                            </Typography>
                          </Grid>
                        </Grid>
                      </Paper>
                    </Grid>
                  </Grid>
                </Box>
              </Grid>
            </Grid>
            <Grid item xs={false} md={1}/>
          </Grid>
        </Grid>
        <Grid item xs={false} sm={1} lg={2}/>
      </Grid>
    </>
  )
};
